import * as React from 'react'
import { BaseDetail } from '@/pages/templates/base-detail'
import { Form } from 'antd'
import api from '@/api'

const formAttrx12 = {
  labelCol: { offset: 2, span: 10 },
  wrapperCol: { span: 12 }
}
const formAttrx24 = {
  labelCol: { offset: 1, span: 5 },
  wrapperCol: { span: 18 }
}
export class OrderDetail extends BaseDetail {
  state = {
    ...this.state,
    customerOptions: [],
    receiptorOptions: [],
    orderStatusOptions: [
      { value: '0', order_closed: '否' },
      { value: '1', order_closed: '是' }
    ],
    logisticsStatusOptions: [
      { value: '0', logistics_completed: '否' },
      { value: '1', logistics_completed: '是' }
    ],
    serviceChannelOptions: [],
    receivingCompanyOptions: [],
    receivingPersonOptions: [],
    receivingCountryOptions: [],
    receivingCityOptions: [],
    detailData: {}
  }
  apiDetail = api.order.detail
  apiUpdate = api.order.update

  displayRows = [
    {
      key: 'div1',
      label: '订单信息',
      span: 24,
      type: 'divider',
      attr: {
        orientation: 'left'
      },
      formAttr: {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 }
      }
    },
    {
      key: 'order_code',
      label: '订单号',
      span: 24,
      attr: { disabled: true },
      formAttr: {
        labelCol: { span: 2 },
        wrapperCol: { span: 6 }
      }
    },
    {
      key: 'customer_id',
      label: '客户代码',
      type: 'select',
      span: 16,
      rules: [{ required: true, message: '请选择客户' }],
      options: this.state.customerOptions,
      attr: { disabled: true },
    },
    {
      key: 'payment_type',
      label: '付款类型',
      type: 'select',
      span: 8,
      options: [
        { value: '1', payment_type: '预付' },
        { value: '2', payment_type: '到付' }
      ],
    },
    {
      key: 'service_channel',
      label: '服务渠道',
      type: 'select',
      span: 8,
      options: this.state.serviceChannelOptions
    },
    {
      key: 'good_type',
      label: '货物类型',
      span: 8,
      type: 'select',
      options: [
        { value: 1, good_type: '一类' },
        { value: 2, good_type: '普货' },
        { value: 3, good_type: '带电' },
        { value: 4, good_type: '不带电' }
      ]
    },
    {
      key: 'package_type',
      label: '包裹类型',
      type: 'select',
      span: 8,
      options: [
        { value: 1, good_type: '文件' },
        { value: 2, good_type: '包裹' }
      ]
    },
    { key: 'good_num', label: '件数', type: 'number', span: 8 },
    { key: 'good_weight', label: '重量(kg)', type: 'number', span: 8 },
    { key: 'good_volume', label: '体积', span: 8 },
    {
      key: 'create_time',
      label: '订单时间',
      span: 16,
      type: 'date',
      attr: { disabled: true },
    },
    {
      key: 'comment',
      label: '备注',
      span: 24,
      type: 'textArea',
      attr: {
        row: 3
      },
    },
    {
      key: 'div2',
      label: '收货信息',
      span: 24,
      type: 'divider',
      attr: {
        orientation: 'left'
      },
      formAttr: {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 }
      }
    },
    {
      key: 'receiving_company',
      label: '收件公司',
      type: 'select',
      span: 24,
      options: this.state.receivingCompanyOptions,
    },
    {
      key: 'receiving_person',
      label: '收货人',
      type: 'select',
      span: 12,
      options: this.state.receivingPersonOptions,
      params: {
        showSearch: true,
        clearable: true
      },
      rules: [
        { required: true, message: '请填写收件人' }
      ]
    },
    {
      key: 'receiving_contact',
      label: '收货方联系方式',
      span: 12,
      rules: [
        { required: true, message: '联系人电话不能为空!'}
      ],
    },
    {
      key: 'receiving_contact2',
      label: '固定电话',
      span: 12,
      rules: [
      ],
    },
    {
      key: 'receiving_country',
      label: '国家',
      span: 12,
      type: 'select',
      options: this.state.receivingCountryOptions,
      rules: [
        { required: true, message: '国家不能为空!'}
      ],
    },
    {
      key: 'receiving_city',
      label: '城市',
      span: 12,
      type: 'select',
      options: this.state.receivingCityOptions,
      rules: [
        { required: true, message: '城市不能为空!'}
      ],
    },
    {
      key: 'receiving_postcode',
      label: '邮编',
      span: 12,
    },
    {
      key: 'receiving_address',
      label: '收货方地址',
      type: 'textArea',
      attr: {
        rows: 2,
      },
      rules: [
        { required: true, message: '请填写详细地址。'}
      ],
    },
  ]
  mapDetailReqData(id) {
    return { order_code: id || this.props.id }
  }
  /*
  mapReqData(data) {
    const f = (options, key, value) => {
      let option = this.state[options][data[key]]
      if (option) {
        data[key] = option[value]
      }
    }
    f('orderStatusOptions', 'order_closed', 'value')
    f('logisticsStatusOptions', 'logistics_completed', 'value')
    f('customerOptions', 'customer_id', 'customer_id')
    f('customerOptions', 'customer_name', 'customer_name')
    f('receiptorOptions', 'receiving_name', 'receiving_name')
  }
  */
  /* 
  fetchReceiptorOptions(id) {
    // 收货方信息
    axios
      .post(api.order.getReceiptorList, {
        customer_id: id
      })
      .then(res => {
        if (res.data && res.data.code === 200) {
          const receiptorOptions = []
          res.data.list.forEach(item => {
            receiptorOptions.push({
              receiving_name: item.name,
              receiving_address: item.address,
              receiving_contact: item.contact,
              receiving_comment: item.comment
            })
          })
          this.setState({
            receiptorOptions
          })
        }
      })
  }
  fetchOptions() {
    // 客户信息
    axios.post(api.order.options).then(res => {
      if (res.data && res.data.code === 200) {
        const customerOptions = []
        res.data.list.forEach(item => {
          customerOptions.push({
            customer_id: item.customer_id,
            customer_name: item.componey_name
          })
        })
        this.setState({
          customerOptions
        })
      }
    })
  }
  */
}
export default Form.create()(OrderDetail)
